<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记账测试页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-title {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .tabs {
            display: flex;
            margin-bottom: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 4px;
        }
        .tab {
            flex: 1;
            text-align: center;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .tab.active {
            background: white;
            color: #007AFF;
            font-weight: 600;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        .category-selector {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 8px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            background: white;
        }
        .category-item:hover {
            border-color: #007AFF;
            background: #f0f8ff;
        }
        .category-item.active {
            border-color: #007AFF;
            background: #007AFF;
            color: white;
        }
        .category-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        .category-name {
            font-size: 12px;
            text-align: center;
        }
        .subcategory-selector {
            display: none;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-top: 12px;
        }
        .subcategory-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 4px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            background: #f8f9fa;
        }
        .subcategory-item:hover {
            border-color: #007AFF;
            background: #f0f8ff;
        }
        .subcategory-item.active {
            border-color: #007AFF;
            background: #007AFF;
            color: white;
        }
        .debug-info {
            background: #f0f0f0;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            font-size: 12px;
        }
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
        }
        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
        }
        .btn-primary {
            background: #007AFF;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-title" id="form-title">记一笔支出</div>
        
        <!-- 收入支出切换 -->
        <div class="tabs">
            <div class="tab active" id="expense-tab">支出</div>
            <div class="tab" id="income-tab">收入</div>
        </div>
        
        <!-- 金额输入 -->
        <div class="form-group">
            <label class="form-label">金额</label>
            <input type="number" class="form-input" id="amount" placeholder="0.00" step="0.01">
        </div>
        
        <!-- 分类选择 -->
        <div class="form-group">
            <label class="form-label">分类</label>
            
            <!-- 调试信息 -->
            <div class="debug-info">
                <strong>调试信息:</strong><br>
                支出分类数量: <span id="expense-count">0</span><br>
                收入分类数量: <span id="income-count">0</span><br>
                当前类型: <span id="current-type">expense</span>
            </div>
            
            <!-- 支出分类 -->
            <div class="category-selector" id="expense-categories">
                <div class="category-item active" data-category="餐饮" data-category-id="1">
                    <div class="category-icon">🍽️</div>
                    <div class="category-name">餐饮</div>
                </div>
                <div class="category-item" data-category="交通" data-category-id="2">
                    <div class="category-icon">🚗</div>
                    <div class="category-name">交通</div>
                </div>
                <div class="category-item" data-category="购物" data-category-id="3">
                    <div class="category-icon">🛍️</div>
                    <div class="category-name">购物</div>
                </div>
                <div class="category-item" data-category="娱乐" data-category-id="4">
                    <div class="category-icon">🎮</div>
                    <div class="category-name">娱乐</div>
                </div>
            </div>
            
            <!-- 收入分类 -->
            <div class="category-selector" id="income-categories" style="display: none;">
                <div class="category-item" data-category="工资" data-category-id="9">
                    <div class="category-icon">💰</div>
                    <div class="category-name">工资</div>
                </div>
                <div class="category-item" data-category="投资" data-category-id="10">
                    <div class="category-icon">📈</div>
                    <div class="category-name">投资</div>
                </div>
                <div class="category-item" data-category="兼职" data-category-id="11">
                    <div class="category-icon">💼</div>
                    <div class="category-name">兼职</div>
                </div>
                <div class="category-item" data-category="其他" data-category-id="12">
                    <div class="category-icon">💎</div>
                    <div class="category-name">其他</div>
                </div>
            </div>
            
            <!-- 支出二级分类 -->
            <div class="subcategory-selector" id="subcategory-expense-1">
                <div class="subcategory-item" data-subcategory="早餐" data-subcategory-id="1">
                    <div class="category-icon">🥐</div>
                    <div class="category-name">早餐</div>
                </div>
                <div class="subcategory-item" data-subcategory="午餐" data-subcategory-id="2">
                    <div class="category-icon">🍱</div>
                    <div class="category-name">午餐</div>
                </div>
                <div class="subcategory-item" data-subcategory="晚餐" data-subcategory-id="3">
                    <div class="category-icon">🍽️</div>
                    <div class="category-name">晚餐</div>
                </div>
                <div class="subcategory-item" data-subcategory="夜宵" data-subcategory-id="4">
                    <div class="category-icon">🌙</div>
                    <div class="category-name">夜宵</div>
                </div>
            </div>
            
            <div class="subcategory-selector" id="subcategory-expense-2">
                <div class="subcategory-item" data-subcategory="公交" data-subcategory-id="6">
                    <div class="category-icon">🚌</div>
                    <div class="category-name">公交</div>
                </div>
                <div class="subcategory-item" data-subcategory="地铁" data-subcategory-id="7">
                    <div class="category-icon">🚇</div>
                    <div class="category-name">地铁</div>
                </div>
                <div class="subcategory-item" data-subcategory="打车" data-subcategory-id="8">
                    <div class="category-icon">🚕</div>
                    <div class="category-name">打车</div>
                </div>
                <div class="subcategory-item" data-subcategory="加油" data-subcategory-id="9">
                    <div class="category-icon">⛽</div>
                    <div class="category-name">加油</div>
                </div>
            </div>
            
            <!-- 收入二级分类 -->
            <div class="subcategory-selector" id="subcategory-income-9">
                <div class="subcategory-item" data-subcategory="月薪" data-subcategory-id="50">
                    <div class="category-icon">📅</div>
                    <div class="category-name">月薪</div>
                </div>
                <div class="subcategory-item" data-subcategory="年终奖" data-subcategory-id="51">
                    <div class="category-icon">🎁</div>
                    <div class="category-name">年终奖</div>
                </div>
                <div class="subcategory-item" data-subcategory="加班费" data-subcategory-id="52">
                    <div class="category-icon">⏰</div>
                    <div class="category-name">加班费</div>
                </div>
                <div class="subcategory-item" data-subcategory="绩效奖金" data-subcategory-id="53">
                    <div class="category-icon">🏆</div>
                    <div class="category-name">绩效奖金</div>
                </div>
            </div>
        </div>
        
        <!-- 时间选择 -->
        <div class="form-group">
            <label class="form-label">时间</label>
            <input type="datetime-local" class="form-input" id="transaction-time">
        </div>
        
        <!-- 备注 -->
        <div class="form-group">
            <label class="form-label">备注</label>
            <input type="text" class="form-input" id="note" placeholder="添加备注（可选）">
        </div>
        
        <button class="btn btn-primary" onclick="submitForm()">确认记账</button>
    </div>
    
    <script>
        let selectedCategory = null;
        let selectedSubCategory = null;
        let transactionType = 'expense';
        
        $(document).ready(function() {
            updateDebugInfo();
            
            // 切换到支出
            $('#expense-tab').click(function() {
                console.log('切换到支出');
                transactionType = 'expense';
                $('#expense-tab').addClass('active');
                $('#income-tab').removeClass('active');
                $('#expense-categories').show();
                $('#income-categories').hide();
                $('#form-title').text('记一笔支出');
                hideAllSubCategories();
                selectFirstCategory('expense');
                updateDebugInfo();
            });
            
            // 切换到收入
            $('#income-tab').click(function() {
                console.log('切换到收入');
                transactionType = 'income';
                $('#income-tab').addClass('active');
                $('#expense-tab').removeClass('active');
                $('#income-categories').show();
                $('#expense-categories').hide();
                $('#form-title').text('记一笔收入');
                hideAllSubCategories();
                selectFirstCategory('income');
                updateDebugInfo();
            });
            
            // 一级分类选择
            $('.category-item').click(function() {
                const parent = $(this).parent();
                parent.find('.category-item').removeClass('active');
                $(this).addClass('active');
                
                selectedCategory = $(this).data('category-id');
                selectedSubCategory = null;
                
                hideAllSubCategories();
                
                // 显示对应的二级分类
                const subcategorySelector = $(`#subcategory-${transactionType}-${selectedCategory}`);
                if (subcategorySelector.length) {
                    subcategorySelector.show();
                    console.log('显示二级分类:', `subcategory-${transactionType}-${selectedCategory}`);
                }
            });
            
            // 二级分类选择
            $('.subcategory-item').click(function() {
                const parent = $(this).parent();
                parent.find('.subcategory-item').removeClass('active');
                $(this).addClass('active');
                
                selectedSubCategory = $(this).data('subcategory-id');
                console.log('选择二级分类:', selectedSubCategory);
            });
            
            // 初始化
            selectFirstCategory('expense');
        });
        
        function hideAllSubCategories() {
            $('.subcategory-selector').hide();
            $('.subcategory-item').removeClass('active');
        }
        
        function selectFirstCategory(type) {
            const firstCategory = $(`#${type}-categories .category-item`).first();
            if (firstCategory.length) {
                $(`#${type}-categories .category-item`).removeClass('active');
                firstCategory.addClass('active');
                selectedCategory = firstCategory.data('category-id');
                
                // 显示对应的二级分类
                const subcategorySelector = $(`#subcategory-${type}-${selectedCategory}`);
                if (subcategorySelector.length) {
                    subcategorySelector.show();
                }
            }
        }
        
        function updateDebugInfo() {
            $('#expense-count').text($('#expense-categories .category-item').length);
            $('#income-count').text($('#income-categories .category-item').length);
            $('#current-type').text(transactionType);
        }
        
        function submitForm() {
            const amount = $('#amount').val();
            const note = $('#note').val();
            const time = $('#transaction-time').val();
            
            if (!amount) {
                alert('请输入金额');
                return;
            }
            
            if (!selectedCategory) {
                alert('请选择分类');
                return;
            }
            
            alert(`记账成功！\n类型: ${transactionType}\n金额: ${amount}\n分类ID: ${selectedCategory}\n子分类ID: ${selectedSubCategory}\n时间: ${time}\n备注: ${note}`);
        }
        
        // 设置默认时间为当前时间
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const defaultTime = `${year}-${month}-${day}T${hours}:${minutes}`;
        $('#transaction-time').val(defaultTime);
    </script>
</body>
</html>